<template>
  <div class="home">
    <!-- 面包屑 -->
    <mbx></mbx>
    <!-- 卡片 -->
    <el-card class="mt16">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-input
            placeholder="请输入搜索内容"
            v-model="queryInfo.query"
            @input="search"
            @clear="search"
            clearable
          >
            <template #append>
              <el-button :icon="Search" @click="getlist" />
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = true"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="user" style="width: 100%" class="mt16">
        <el-table-column fixed label="#" type="index" />
        <el-table-column fixed label="姓名" prop="username" />
        <el-table-column fixed label="邮箱" prop="email" />
        <el-table-column fixed label="电话" prop="mobile" />
        <el-table-column fixed label="角色" prop="role_name" />
        <el-table-column fixed prop="date" label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="gbzt(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="bj(scope.row)"
              :icon="Edit"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              @click="del(scope.row.id)"
              :icon="Delete"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              @click="xurole(scope.row)"
              :icon="Setting"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹出框 -->
      <el-dialog
        v-model="dialogVisible"
        title="添加用户"
        width="40%"
        @close="close"
      >
        <el-form
          :model="ruleForm"
          ref="FormRef"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="add">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog
        v-model="dialogVisible1"
        title="编辑用户"
        width="40%"
        @close="close"
      >
        <el-form
          :model="ruleForm1"
          ref="edFormRef"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm1.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm1.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm1.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="edit">确定</el-button>
            <el-button @click="dialogVisible1 = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="queryInfo.pagenum"
        v-model:page-size="queryInfo.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置的模态框 -->
      <el-dialog title="分配角色" v-model="dialogVisiblesz" width="28%">
        <div class="fp">当前的用户: {{ role.username }}</div>
        <div style="margin: 30px 0">当前的角色: {{ role.role_name }}</div>
        <div style="margin-bottom: 10px">
          <span style="margin-right: 15px">分配新角色</span>
          <el-select v-model="options.id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="xurole1">确 定</el-button>
          <el-button @click="dialogVisiblesz = false">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 设置的模态框 -->
    </el-card>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted, ref } from "vue";
import { Search, Edit, Delete, Setting } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  adduser,
  userlist,
  delmore,
  edituser,
  changestatus,
  getfpjs,
  userroles,
} from "../http/api.js";
import _ from "lodash";
export default {
  setup(props) {
    // 定义表单绑定的ref
    const FormRef = ref(null); //添加的
    const edFormRef = ref(null); //编辑的
    const obj = reactive({
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      user: [],
      total: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisiblesz: false,
      ruleForm: { password: "", username: "", mobile: "", email: "" },
      ruleForm1: { username: "", id: "", mobile: "", email: "" },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
          {
            pattern: /^\w+@[A-z0-9]{2,5}\.[a-z]{2,3}$/,
            message: "请正确输入邮箱格式",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "请输入用户手机号", trigger: "blur" },
          {
            pattern: /^1[3-9][0-9]{9}$/,
            message: "请正确输入手机格式",
            trigger: "blur",
          },
        ],
      },
      //   改变状态时用的
      changezt1: {
        id: 0,
        mg_state: "",
      },
      // 分配权限
      role: {
        id: 0,
        role_name: "",
        username: "",
      },
      options: [], //下拉框里得值
    });
    // 挂载
    onMounted(() => {
      getlist();
    });
    // 渲染页面
    let getlist = async () => {
      const res = await userlist(obj.queryInfo);
      console.log("用户的数据列表", res);
      obj.user = res.users;
      obj.total = res.total;
    };
    // 点击添加用户
    const add = () => {
      FormRef.value.validate(async (valid) => {
        if (valid) {
          const res = await adduser(obj.ruleForm);
          console.log("用户的数据", res);
          obj.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    // 关闭模态框清空数据
    const close = () => {
      obj.ruleForm = {
        password: "",
        username: "",
        id: "",
        mobile: "",
        email: "",
      };
    };
    // 编辑
    const bj = (item) => {
      console.log(item);
      obj.dialogVisible1 = true;
      obj.ruleForm1.username = item.username;
      obj.ruleForm1.email = item.email;
      obj.ruleForm1.mobile = item.mobile;
      obj.ruleForm1.id = item.id;
    };
    const edit = () => {
      edFormRef.value.validate(async (valid) => {
        if (valid) {
          const res = await edituser(obj.ruleForm1);
          console.log("用户的数据", res);
          obj.dialogVisible1 = false;
          getlist();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    // 删除
    const del = (id) => {
      ElMessageBox.confirm("您确定要删除它吗?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(async () => {
          const res = await delmore(id);
          console.log("删除", res);
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };
    // 改变状态
    const gbzt = async (val) => {
      let { id, mg_state } = val;
      obj.changezt1.id = id;
      obj.changezt1.mg_state = mg_state;
      const res = await changestatus(obj.changezt1);
      console.log("改变状态", res);
    };
    // 修改角色
    const xurole = async (scope) => {
      obj.dialogVisiblesz = true;
      // 获取权限的数据
      let res = await userroles();
      obj.options = res;
      console.log("这是用户模块的角色", res);
      console.log("这是用户模块的角色scope", scope);
      obj.role.username = scope.username;
      obj.role.role_name = scope.role_name;
      obj.role.id = scope.id; //当前自己的id
    };
    const xurole1 = async () => {
      obj.dialogVisiblesz = false;
      const { id } = obj.options; //获取角色权限的id
      console.log("提取的ID", id);
      const res = await getfpjs(obj.role.id, id);
      console.log("修改角色", res);
      getlist();
    };
    // 搜索
    const search = _.debounce(function () {
      getlist();
    }, 300);

    // 改变每页条数
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`);
      obj.queryInfo.pagesize = val;
      getlist();
    };
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`);
      obj.queryInfo.pagenum = val;
      getlist();
    };
    return {
      ...toRefs(obj),
      Search,
      add,
      bj,
      del,
      gbzt,
      search,
      edFormRef,
      FormRef,
      handleSizeChange,
      handleCurrentChange,
      bj,
      edit,
      del,
      gbzt,
      xurole,
      xurole1,
      Edit,
      Delete,
      Setting,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .dialog-footer {
  margin-left: 160px;
}
</style>
